<template>
  <el-dialog :title="'取消预定'" :close-on-click-modal="false" :visible.sync="visible" :append-to-body="true">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
      <el-form-item label="取消原因" prop="type">
        <el-select v-model="dataForm.type" @change="typeChange" placeholder="请选择" size="small">
          <el-option v-for="item in documenttypelist" :key="item.id" :label="item.label" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="remarks">
        <el-input v-model="dataForm.remarks" placeholder="备注"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">{{$t('Common.Cancel')}}</el-button>
      <el-button type="primary" @click="dataFormSubmit()">{{ $t('Common.Confirm') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        visible: false,
        documenttypelist: [],
        dataForm: {
          peopleId:'',
          singleId:'',
          type:'',
          remarks:''
        },
        dataRule: {

        }
      };
    },
    methods: {
      init(peopleId,singleId) {
        Object.assign(this.$data, this.$options.data())
        this.dataForm.peopleId = peopleId
        this.dataForm.singleId = singleId

        this.visible = true;
        this.getagreementType('reservation_cancellation');
      },
      async typeChange(val) {
        var list = await this.documenttypelist.filter(item => item.id == val)
        if (list.length > 0) {
          this.dataForm.remarks = list[0].remake
        }
      },
      getagreementType(type) {
        this.$http({
          url: this.$http.adornUrl('/hotel/thotelagreementtype/list'),
          method: 'get',
          params: this.$http.adornParams({
            page: 1,
            limit: 999,
            type: type
          })
        }).then(({
          data
        }) => {
          this.documenttypelist = data.page.list;
          if (this.documenttypelist.length > 0) {
            console.log(this.documenttypelist[0])
            this.dataForm.type = this.documenttypelist[0].id
            this.dataForm.remarks = this.documenttypelist[0].remake
          }
        });
      },
      //取消
      dataFormSubmit() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            //发起请求
            this.$http({
              url: this.$http.adornUrl(`/hotel/roomReservation/cancel_reserve_single/${this.dataForm.singleId}`),
              method: 'get',
              params: this.$http.adornParams({
                peopleId:this.dataForm.peopleId,
                remarks:this.dataForm.remarks
              })
            }).then( async ({ data }) => {
              if (data && data.code === 0) {
                this.visible = false
                this.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 1500
                });
                this.$emit('refreClosing')
              } else {
                this.$message.error(data.msg);
              }
            });
          }
        })
      }
    }
  };
</script>

<style>
</style>
